<template>
  <iLayout>
    <section slot="title">角色列表</section>
    <section slot="operation">
      <el-button type="primary" round icon="el-icon-plus" @click="addRole">新建角色</el-button>
    </section>
    <section slot="right" class="body">
      <el-table :data="role.data" stripe border>
        <el-table-column label="角色名称" prop="name"></el-table-column>
        <el-table-column label="角色备注" prop="remark"></el-table-column>
        <el-table-column label="操作" width="220px" fixed="right">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" round @click="editRole(scope.row)">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" round @click="delRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <section>
      <el-dialog :visible.sync="dialog.visible" :title="dialog.title" width="30%" @close="handleClose" destroy-on-close>
        <role-form ref="roleForm" :model="role.form" :rules="role.rules"></role-form>
        <div class="h40vh">
          <role-tree ref="roleTree" :data="menu.data" :props="menu.props" :defaultCheckedKeys="menu.defaultCheckedKeys" @menuChecked="treeCheckedKeys"></role-tree>
        </div>
        <div slot="footer">
          <el-button type="default" @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="isDelete" title="删除角色" width="30%" destroy-on-close>
        该操作将删除角色：<el-tag type="danger">{{ role.form.name }}</el-tag>，您确认要删除该角色吗？
        <div slot="footer">
          <el-button type="default" @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-dialog>
    </section>
  </iLayout>
</template>

<script>
import * as menuapi from '../../api/private/menu'
import * as api from '../../api/private/role'
import RoleForm from './components/role_form.vue'
import RoleTree from './components/role_tree.vue'
export default {
  name: 'Role',
  components: {
    RoleForm,
    RoleTree
  },
  data: () => ({
    page: {
      index: 1,
      size: 10,
      total: 100
    },
    role: {
      data: [],
      form: {},
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    },
    menu: {
      data: [],
      props: {
        children: 'children',
        label: 'menuName'
      },
      defaultCheckedKeys: [],
      active: []
    },
    dialog: {
      visible: false,
      title: ''
    },
    isEdit: false,
    isDelete: false
  }),
  methods: {
    init() {
      this.getMenu()
      this.getRole()
    },
    async getMenu() {
      const data = await menuapi.getMenu()
      if (data.code === 0) {
        this.menu.data = data.data
      } else {
        this.$msg.error(`获取菜单数据失败，${data.msg}`)
      }
    },
    async getRole() {
      const data = await api.getRole()
      if (data.code === 0) {
        this.role.data = data.data.list
      } else {
        this.$msg.error(`获取角色数据失败，${data.msg}`)
      }
    },
    handleClose() {
      this.role.form = {}
      this.menu.defaultCheckedKeys = []
      this.isEdit = false
      this.dialog.visible = false
      this.dialog.title = ''
    },
    treeCheckedKeys(data) {
      this.menu.active = data
    },
    confirm() {
      if (this.isDelete) {
        this.confirmDeleteRole()
        return
      }
      if (this.isEdit) {
        this.confirmEditRole()
      } else {
        this.confirmAddRole()
      }
    },
    cancel() {
      this.role.form = {}
      this.menu.defaultCheckedKeys = []
      this.isEdit = false
      this.isDelete = false
      this.dialog.visible = false
    },
    addRole() {
      this.role.form = {}
      this.menu.defaultCheckedKeys = []
      this.isEdit = false
      this.dialog.visible = true
      this.dialog.title = '添加角色'
    },
    async confirmAddRole() {
      if (this.$refs.roleForm.validate()) {
        this.role.form.menuIdList = this.menu.active
        const data = await api.addRole(this.role.form)
        if (data.code === 0) {
          this.$msg.success(`添加角色成功`)
          this.cancel()
          this.getRole()
        } else {
          this.$msg.error(`添加角色失败，${data.msg}`)
        }
      }
    },
    editRole(data) {
      this.cacheData = data
      this.role.form = data
      this.menu.active = data.menuIdList
      this.menu.defaultCheckedKeys = data.menuIdList
      this.isEdit = true
      this.dialog.visible = true
      this.dialog.title = '修改角色'
    },
    async confirmEditRole() {
      if (this.$refs.roleForm.validate()) {
        this.role.form.menuIdList = this.menu.active
        const data = await api.editRole(this.role.form)
        if (data.code === 0) {
          this.$msg.success(`修改角色成功`)
          this.cancel()
          this.getRole()
        } else {
          this.$msg.error(`修改角色失败，${data.msg}`)
        }
      }
    },
    delRole(data) {
      this.role.form = data
      this.isDelete = true
    },
    async confirmDeleteRole() {
      const data = await api.delRole([`${this.role.form.id}`])
      if (data.code === 0) {
        this.$msg.success(`删除角色成功`)
        this.cancel()
        this.getRole()
      } else {
        this.$msg.error(`删除角色失败，${data.msg}`)
      }
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
#Role {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .operation {
    width: 100%;
    height: 3rem;
    overflow: hidden;
    overflow-y: auto;
  }

  .body {
    width: 100%;
    height: calc(100% - 6rem);
  }

  .action {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
